<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Cyberpunk 2077 Expanding Card - HTML, CSS, Javascript</title>
  <link rel="stylesheet" href="./css/style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- integrity 属性允许浏览器检查获取的脚本，以确保在源代码被篡改时不加载该代码。integrity 属性值是外部脚本文件的文件哈希值。 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin="anonymous" />
      <link rel="stylesheet" href="style.css">
    <title>Expanding Cards</title>
  </head>

  <body>
    <div class="container">
      <div class="panel active"
        style="background-image:url('https://images.hdqwalls.com/wallpapers/cyberpunk-2077-game-2020-4k-cl.jpg')">
        <h3>探索世界</h3>

      </div>

      <div class="panel" style="background-image:url('https://wallpapercave.com/wp/wp3242121.jpg')">
        <h3>全新的角色</h3>

      </div>

      <div class="panel" style="background-image:url('https://images5.alphacoders.com/927/thumb-1920-927025.png')">
        <h3>全新的任务</h3>

      </div>

      <div class="panel"
        style="background-image:url('https://www.wallpapertip.com/wmimgs/170-1705124_cyberpunk-2077-judy-alvarez-gif.jpg')">
        <h3>多重结局</h3>

      </div>

      <div class="panel" style="background-image:url('https://images5.alphacoders.com/927/thumb-1920-927025.png')">
        <h3>自由畅玩</h3>

      </div>

    </div>

  </body>

  </html>
  <!-- partial -->
  <script src="./js/script.js"></script>

</body>

</html>